<template>
  <!--上传文件-->
  <div>
    <div style="height: 5px"></div>
    <el-row :gutter="10">
      <el-col :span="7">&nbsp;&nbsp;<el-input size="small" id="inputFind" type="text" placeholder="请输入搜索内容"
                                              v-model="searchMsg" @input="inputChange()" @keydown.enter.native="searchPdf" />
      </el-col>
      <el-col :span="4">
        <el-button size="small" type="primary" icon="el-icon-search" @click="searchPdf">全文搜索</el-button>
        <!--          <el-button size="small" type="primary" icon="el-icon-reading" @click="continueWatch()">继续阅读</el-button>-->
      </el-col>
    </el-row>


    <el-drawer
      title="搜索结果"
      :visible.sync="drawer"
      direction="ltr"
      size="50%">
        <!--      <el-link @click="searchClick(temp.pageNo)">第{{temp.pageNo}}页：{{temp.searchStr}}</el-link>-->
<!--      tables.slice((currpage - 1) * pagesize, currpage * pagesize)-->
        <el-table v-loading="tableLoading"
                  :data="tables"
                  border
                  style="width: 100%"
                  height="98%">
          <el-table-column prop="pageNo" label="页码" width="50">
          </el-table-column>
          <el-table-column prop="searchStr" label="匹配的内容">
            <template slot-scope="scope">    
              <span class="col-cont" v-html="showSearchMsg(scope.row.searchStr)" ></span>
            </template>
          </el-table-column>
          <el-table-column width="100px" label="操作">
            <template slot-scope="scope">
              <el-button @click="searchClick(scope.row.pageNo)" style="height: 42px;">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
<!--        <el-pagination background-->
<!--                       layout="prev, pager, next, sizes, total, jumper"-->
<!--                       :page-sizes="[5, 10, 15, 20]"-->
<!--                       :page-size="pagesize"-->
<!--                       :total="searchData.length"-->
<!--                       @current-change="handleCurrentChange"-->
<!--                       @size-change="handleSizeChange">-->
<!--        </el-pagination>-->
    </el-drawer>

    <div id="iframe-group">
      <iframe v-show="show1 == showNum" id="previewPdf1"
              :src="'/pdfview/static/pdf/web/viewer.html?page=' + totalPage +'&file=' + fileUrl1"
              height="800"
              width="100%">
      </iframe>
      <iframe v-show="show2 == showNum" id='previewPdf2'
              :src="'/pdfview/static/pdf/web/viewer.html?page=' + totalPage +'&file=' + fileUrl2"
              height="800"
              width="100%">
      </iframe>
      <iframe v-show="show3 == showNum" id="previewPdf3"
              :src="'/pdfview/static/pdf/web/viewer.html?page=' + totalPage +'&file=' + fileUrl3"
              height="800"
              width="100%">
      </iframe>
    </div>
    <div id="slider-div">
      <!--      <el-slider id="slider1" v-model="currentPageNum"-->
      <!--                 :max="totalPage"-->
      <!--                 :min="1"-->
      <!--                 :step="1" @change="getPdfSimple(currentPageNum)">-->
      <!--      </el-slider>-->
      <vue-slider v-model="currentPageNum"
                  :tooltip-formatter="val => '第'+val+'页'" dotSize="20"
                  :interval="1"
                  direction="ttb"
                  :height="800"
                  :min="1"
                  :max="totalPage"
                  @drag-end="getPdfSimple(currentPageNum)">
      </vue-slider>
    </div>

  </div>

</template>

<script>

  import tips from './tips'
  import loading from './loading'


  export default {
    name: 'pdfcj',
    components: {tips, loading},
    data () {
      return {
        fileUrl1: '',
        fileUrl2: '',
        fileUrl3: '',
        show1: 1,
        show2: 2,
        show3: 3,
        showNum: 1,
        preShowNum: 1,
        id: '',
        page1: 1,
        page2: 11,
        page3: 21,
        totalPage: 1,
        searchData: [],
        searchMsg: '',
        searchPara: {
          id: '',
          searchWord: ''
        },
        currentPageNum: 1,
        pagesize: 10,
        currpage: 1,
        goToOnlyPage: '',
        preFileUrl: '',
        firstPageMsg: '已经浏览到第一页了！',
        lastPageMsg: '已经浏览到最后一页了！',
        searchTips: '请输入搜索内容!',
        drawer:false,
        tableLoading:false,
      }
    },
    created () {
      window['handleChangePreFileScroll'] = () => {
        this.handleChangePreFileScroll()
      }
      window['handleChangeNextFileScroll'] = () => {
        this.handleChangeNextFileScroll()
      }
      window['searchClick'] = (pageVal) => {
        this.searchClick(pageVal)
      }
      window['getGoToOnlyPage'] = () => {
        return this.getGoToOnlyPage()
      }
      window['setGoToOnlyPage'] = (pageVal) => {
        this.setGoToOnlyPage(pageVal)
      }
      window['setCurrentViewPage'] = () => {
        this.setCurrentViewPage()
      }
      window['getSearchMsg'] = () => {
        return this.getSearchMsg()
      }
    },
    mounted () {
      this.id = this.$route.query.id
      this.searchPara.id = this.$route.query.id
      this.totalPage = parseInt(this.$route.query.num)
      this.getPdfSimple()
      window.addEventListener('message', function (res) {
        let value = res.data
        let iframes = document.getElementsByTagName('iframe')
        for (let i = 0; i < iframes.length; i++) {
          iframes[i].contentWindow.postMessage(value, '*')
        }
      })

    },
    computed: {
      tables: function () {
        const search = this.searchMsg
        if (search) {
          return this.searchData.filter(dataNews => {
            return Object.keys(dataNews).some(key => {
              return String(dataNews[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.searchData
      }
    },
    methods: {
      handleChangePreFileScroll () {
        this.changePrePdfFile()
        console.log('跳转成功！')
      }
      ,
      handleChangeNextFileScroll () {
        this.changeNextPdfFile()
        console.log('跳转成功！')
      },

      getGoToOnlyPage () {
        if (this.searchMsg != '' && this.searchMsg != null) {
          return this.goToOnlyPage + '###' + this.searchMsg
        } else {
          return this.goToOnlyPage
        }
      },
      setGoToOnlyPage (val) {
        if (this.searchMsg != '' && this.searchMsg != null) {
          this.goToOnlyPage = val
        }
      },
      setCurrentViewPage () {
        this.currentPageNum = parseInt(this.getViewCurrentPage())
      },
      postMsgToShowNum (val) {
        if (this.showNum == 1) {
          document.getElementById('previewPdf1').contentWindow.postMessage(val, '*')
        } else if (this.showNum == 2) {
          document.getElementById('previewPdf2').contentWindow.postMessage(val, '*')
        } else if (this.showNum == 3) {
          document.getElementById('previewPdf3').contentWindow.postMessage(val, '*')
        }
      },

      getPdfSimple (pageVal) {
        let pageNumber = 1
        if (pageVal != null) {
          pageNumber = parseInt(pageVal)
          let partFirstPage = pageNumber - (pageNumber % 10 == 0 ? 10 : pageNumber % 10) + 1
          let lastPartFirstPage = this.totalPage - (this.totalPage % 10 == 0 ? 10 : this.totalPage % 10) + 1

          this.page1 = partFirstPage
          // alert("getPdfSimple方法: " + onlyPage)
          this.page3 = this.page1 - 10
          this.page2 = this.page1 + 10
          if (partFirstPage == 1) {
            this.page2 = 11
            this.page3 = 21
          } else if (partFirstPage == lastPartFirstPage) {
            this.page3 = partFirstPage - 10
            this.page2 = partFirstPage - 20
          }
        }

        let onlyPage = pageNumber % 10 == 0 ? 10 : pageNumber % 10
        this.showNum = 1
        this.goToOnlyPage = this.page1 + '###' + onlyPage
        this.fileUrl1 = '/pdfapi/getPdfFile/' + this.id + '/' + this.page1
        this.preFileUrl = this.fileUrl1.substring(0, this.fileUrl1.lastIndexOf('/') + 1)
        document.getElementById('previewPdf1').contentWindow.postMessage('search###' + onlyPage, '*')

        if (this.totalPage > 10) {
          this.fileUrl2 = this.preFileUrl + this.page2
        } else {
          this.page2 = this.page1
          this.fileUrl2 = this.preFileUrl + this.page2
        }
        if (this.totalPage > 20) {
          this.fileUrl3 = this.preFileUrl + this.page3
        } else {
          this.page3 = this.page2
          this.fileUrl3 = this.preFileUrl + this.page3
        }
      },
      changePrePdfFile () {
        // 显示loading

        let currentPage = this.getViewCurrentPage()
        if (currentPage <= 1) {
          this.openMesage(this.firstPageMsg)
          return
        }
        if (this.showNum == 1) {
          //获取当前URL中的page参数
          // pageNum1 = this.getPageFromHref(this.fileUrl1)
          //设置上一个页面的page
          this.page3 = this.page1 - 10
          this.goToOnlyPage = this.page3 + '###' + 10
          this.fileUrl3 = this.preFileUrl + this.page3
          //设置上上一个页面的page
          let preCurrentPage = this.page3 - 10
          if (preCurrentPage > 0) {
            this.page2 = preCurrentPage
            this.fileUrl2 = this.preFileUrl + this.page2
          }
        } else if (this.showNum == 2) {
          //获取当前URL中的page参数
          // pageNum1 = this.getPageFromHref(this.fileUrl2)
          //设置上一个页面的page
          this.page1 = this.page2 - 10
          this.goToOnlyPage = this.page1 + '###' + 10
          this.fileUrl1 = this.preFileUrl + this.page1
          //设置上上一个页面的page
          let preCurrentPage = this.page1 - 10
          if (preCurrentPage > 0) {
            this.page3 = preCurrentPage
            this.fileUrl3 = this.preFileUrl + this.page3
          }
        } else if (this.showNum == 3) {
          //获取当前URL中的page参数
          // pageNum1 = this.getPageFromHref(this.fileUrl3)
          //设置上一个页面的page
          this.page2 = this.page3 - 10
          this.goToOnlyPage = this.page2 + '###' + 10
          this.fileUrl2 = this.preFileUrl + this.page2
          //设置上上一个页面的page
          let preCurrentPage = this.page2 - 10
          if (preCurrentPage > 0) {
            this.page1 = preCurrentPage
            this.fileUrl1 = this.preFileUrl + this.page1
          }
        }

        this.showNum = (this.showNum - 1) % 3 == 0 ? 3 : (this.showNum - 1) % 3
        this.postMsgToShowNum('search###' + '10')

      },
      changeNextPdfFile () {
        // 显示loading

        // let pageNum1 = 1
        let currentPage = this.getViewCurrentPage()
        if (currentPage >= this.totalPage) {
          this.openMesage(this.lastPageMsg)
          return
        }
        if (this.showNum == 1) {
          //获取当前URL中的page参数
          // pageNum1 = this.getPageFromHref(this.fileUrl1)
          //设置下一个页面的page
          this.page2 = this.page1 + 10
          this.goToOnlyPage = this.page2 + '###' + 1
          this.fileUrl2 = this.preFileUrl + this.page2
          //设置下下个页面的page
          let nextPage = this.page2 + 10
          if (nextPage <= this.totalPage) {
            this.page3 = nextPage
            this.fileUrl3 = this.preFileUrl + this.page3
          }
        } else if (this.showNum == 2) {
          //获取当前URL中的page参数
          // pageNum1 = this.getPageFromHref(this.fileUrl2)
          //设置下一个页面的page
          this.page3 = this.page2 + 10
          this.goToOnlyPage = this.page3 + '###' + 1
          this.fileUrl3 = this.preFileUrl + this.page3
          //设置下下个页面的page
          let nextPage = this.page3 + 10
          if (nextPage <= this.totalPage) {
            this.page1 = nextPage
            this.fileUrl1 = this.preFileUrl + this.page1
          }
        } else if (this.showNum == 3) {
          //获取当前URL中的page参数
          // pageNum1 = this.getPageFromHref(this.fileUrl3)
          //设置下一个页面的page
          this.page1 = this.page3 + 10
          this.goToOnlyPage = this.page1 + '###' + 1
          this.fileUrl1 = this.preFileUrl + this.page1
          //设置下下个页面的page
          let nextPage = this.page1 + 10
          if (nextPage <= this.totalPage) {
            this.page2 = nextPage
            this.fileUrl2 = this.preFileUrl + this.page2
          }
        }

        this.showNum = (this.showNum + 1) % 3 == 0 ? 3 : (this.showNum + 1) % 3
        this.postMsgToShowNum('search###' + '1')
      },
      getPartCurrentPage () {
        if (this.showNum == 1) {
          return this.getPageFromHref(this.fileUrl1)
        } else if (this.showNum == 2) {
          return this.getPageFromHref(this.fileUrl2)
        } else if (this.showNum == 3) {
          return this.getPageFromHref(this.fileUrl3)
        }
      },

      getViewCurrentPage () {
        if (this.showNum == 1) {
          return document.getElementById('previewPdf1').contentWindow.getCurrentPage()
        } else if (this.showNum == 2) {
          return document.getElementById('previewPdf2').contentWindow.getCurrentPage()
        } else if (this.showNum == 3) {
          return document.getElementById('previewPdf3').contentWindow.getCurrentPage()
        }
      },

      getPageFromHref (hrefVal) {
        if (hrefVal == null) {
          return
        }
        let lastIndexOf = hrefVal.lastIndexOf('/')
        let pageTemp = hrefVal.substring(lastIndexOf + 1)
        return parseInt(pageTemp)
      }
      ,

      searchPdf () {
        this.drawer = true
        this.tableLoading = true
        if (this.searchMsg == null || this.searchMsg == '') {
          this.openMesage(this.searchTips)
          return
        }
        this.searchPara.searchWord = this.searchMsg
        this.$axios.post( '/pdfapi/searchFile', this.searchPara)
          .then((data) => {
            // alert('一共发现了' + data.data.data.length + '条结果！')
            this.searchData = data.data.data
            this.tableLoading = false
          })
          .catch(function(error){
            this.tableLoading = false
            this.openNotice("请求失败或该PDF不支持全文查找！")
        })
      },
      continueWatch () {
        if (this.showNum == 4) {
          this.showNum = this.preShowNum
        }
      },
      searchClick (pageVal) {
        if (pageVal == null || pageVal == '') {
          return
        } else {
          this.getPdfSimple(pageVal)
        }
        this.drawer = false
      },
      handleCurrentChange (cpage) {
        this.currpage = cpage
      }
      ,
      handleSizeChange (psize) {
        this.pagesize = psize
      },
      getSearchMsg () {
        return this.searchMsg
      },
      inputChange () {
        this.searchData = []
        // this.searchPdf()
        let iframes = document.getElementsByTagName('iframe')
        for (let i = 0; i < iframes.length; i++) {
          iframes[i].contentWindow.wordHighLight(this.searchMsg)
        }
      },
      openMesage (value) {
        this.$message({
          message: value,
          type: 'warning'
        })
      },
      openNotice (value) {
        const h = this.$createElement
        this.$notify({
          title: '提示',
          message: h('i', {style: 'color: teal'}, value)
        })
      },
      showSearchMsg(val) {
        val = val + '';
        if (val.indexOf(this.searchMsg) !== -1 && this.searchMsg !== '') {
          return val.replace(this.searchMsg, '<span style="color: #409EFF; ">' + this.searchMsg + '</span>')
        } else {
          return val
        }
      }
    }
  }
</script>

<style scoped>

  span {
    margin-left: 20px;
    margin-top: 10px;
  }

  a {
    cursor: pointer;
    font-weight: bold;
    color: #66b1ff;
  }

  a:hover {
    color: red;
  }

  #iframe-group {
    display: inline-block;
    width: 96%;
  }
  #slider-div{
    display: inline-block;
  }
</style>
